<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box"
			style="padding-top: 10rpx;padding-left: 30rpx;padding-right: 30rpx;" duration="300">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="bottomTrigger()">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>

					<!-- 订单列表 -->
					<view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item"
						@longpress="longpress(item)">
						<view class="goods-box-single">
							<image class="goods-img" :src="item.device.imageUrl" mode="aspectFill"></image>
							<view class="right" @click="navToDetailPage(item)">
								<text class="title clamp"
									style="color: #62b074;font-weight: 600;font-size: 25rpx;letter-spacing: 1rpx;">订单编号:{{item.orderSn}}</text>
								<!-- <text class="price">{{ item.price }}</text> -->
								<text class="title clamp" v-if="item.phone==''"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:2rpx">订单用户:用户未授权手机号</text>
								<text class="title clamp" v-if="item.phone!=''"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:2rpx">订单用户:{{item.phone}}</text>
								<text class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:2rpx">订单房间:{{ item.device.machineName }}</text>
								<text class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:2rpx">下单时间:{{ item.createDatetime }}</text>
								<text class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:2rpx">开始时间:{{ item.startTime }}</text>
								<text class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:2rpx">结束时间:{{ item.endTime }}</text>
								<text class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:2rpx">订单金额:{{item.price}}元</text>
								<text v-if="item.integral==0" class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:2rpx">消费类型:直接消费</text>
								<text v-if="item.integral!=0" class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:2rpx">消费类型:余额消费</text>

							</view>
						</view>
						<view class="price-box">
							<button class="action-btn status" v-if="item.orderStatus==2"><text
									style="letter-spacing:10rpx">已付款</text></button>
							<button class="action-btn status" v-if="item.orderStatus==7"><text
									style="letter-spacing:10rpx">已完成</text></button>
							<button class="action-btn status" v-if="item.orderStatus==14"><text
									style="letter-spacing:10rpx">已取消</text></button>
							<button class="action-btn status" v-if="item.orderStatus==12"><text
									style="letter-spacing:10rpx">未付款</text></button>
							<button class="action-btn status" v-if="item.orderStatus==20"><text
									style="letter-spacing:10rpx">待取消</text></button>
							<button class="action-btn status" v-if="item.orderStatus==15"><text
									style="letter-spacing:10rpx">已关闭</text></button>
							<button @click="agreeCannelOrder(item.id,item.storeId)" class="action-btn cannel" v-if="item.orderStatus==20"><text style="letter-spacing:10rpx">同意取消</text></button>
						</view>
						<view class="jiashi-area">
							<button class="jiashi-btn" @click="xuding(item)">加时</button>
						</view>
						<view class="operate-area" v-if="item.orderStatus==12 || item.orderStatus==1 || item.orderStatus==20">
							<button class="operate-btn" @click="deleteOrder(item.id)">删除订单</button>
						</view>
					</view>
					<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<uni-popup ref="xudingpopup" type="bottom">
			<view class="xudingpopup">
				<view class="popuptitle">
					<text>选择加时时间</text>
				</view>
				<view class="meals">
					<!-- :class="panduan==index1 ? 'meal-item-selected':'meal-item' " -->
					<view :class="panduan==index1 ? 'meal-item-selected':'meal'" v-for="(item1, index1) in meals"
						:key="index1" @click="changePrice(item1,$event,index1)">
						<text>{{item1.name}}</text>
					</view>
				</view>
				<view class="xudingsub" @click="afrimJiashi()">
					<text>确认加时</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import Api from '@/common/api';
	// import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniPopupShare from "@/components/uni-popup/uni-popup-share.vue";
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		formatDate
	} from '@/common/date';
	var currentPage = 1;
	export default {
		components: {
			// uniLoadMore,
			empty,
			uniPopupShare,
			uniPopup,
			uniLoadMore
		},
		data() {
			return {
				loadingText: '加载中...',
				loadingType: 0, //0---contentdown 1---contentrefresh  2---contentnomore
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				tabCurrentIndex: 0,
				navList: [{
						status: '0',
						text: '全部',
						loadingType: 'more',
						orderList: []
					},
					{
						status: '12,1',
						text: '待付款',
						loadingType: 'more',
						orderList: []
					},
					{
						status: '2',
						text: '已付款',
						loadingType: 'more',
						orderList: []
					},
					{
						status: '7',
						text: '已完成',
						loadingType: 'more',
						orderList: []
					},
					{
						status: '14',
						text: '已取消',
						loadingType: 'more',
						orderList: []
					}
				],
				panduan: 0,
				meals: [
					{
						duration: 60,
						name: '1小时'
					},
					{
						duration: 120,
						name: '2小时'
					},
					{
						duration: 180,
						name: '3小时'
					},
					{
						duration: 240,
						name: '4小时'
					},
					{
						duration: 300,
						name: '5小时'
					}
				],
				bottomData: [{
						text: '开大门',
						icon: '/static/door1.png',
						name: '5'
					},
					{
						text: '开包厢门',
						icon: '/static/door.png',
						name: '0'
					},
					{
						text: '续费1小时',
						icon: '/static/xufei.png',
						name: '1'
					},
					{
						text: '续费2小时',
						icon: '/static/xufei.png',
						name: '2'
					},
					{
						text: '续费3小时',
						icon: '/static/xufei.png',
						name: '3'
					},
					{
						text: '续费4小时',
						icon: '/static/xufei.png',
						name: '4'
					},
					{
						text: '续费6小时',
						icon: '/static/xufei.png',
						name: '6'
					},
					{
						text: '续费8小时',
						icon: '/static/xufei.png',
						name: '8'
					}
				],
				order:null,
				storeId:null,
				duration:60,
				store:null
			};
		},
		onLoad(options) {
			this.storeId = options.storeId;
			this.loadData(options.storeId);
			this.getStoreById(this.storeId);
		},
		onPullDownRefresh() {
			this.loadData(this.storeId);
		},
		onReachBottom() {
			console.log(111)
			this.getMoreList();
		},
		onShow() {
			this.loadData(this.storeId);
		},
		methods: {
			changePrice(item, e, index) {
				this.panduan = index;
				this.duration = this.meals[index].duration;
			},
			xuding(order) {
				if(order.orderStatus!=2){
					uni.showModal({
						title: '提示',
						content: '订单已过期或未到时间',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {
								
							}
						}
					});
					return;
				}
				this.order = order
				this.$refs.xudingpopup.open('bottom')
			},
			async afrimJiashi(){
				console.log(this.order)
				let startTime = this.order.endTime;
				let endTime = this.addMinute(startTime,this.duration)
				let memberId = this.order.memberId;
				let lastId = this.order.id;
				let params = {
					deviceId: this.order.deviceId,
					storeId: this.order.storeId,
					mealId: this.order.mealId,
					startTime: startTime,
					endTime: endTime,
					memberId:memberId,
					price: 1,
					mealName: '管理员加时',
					lastId:lastId,
					duration: this.duration
				};
				this.params = params;
				this.checkIsIntersect()
			},
			async checkIsIntersect() {
				let params = this.params;
				let data = await Api.apiCall('post', Api.order.checkIsIntersect, params);
				if (data && data == 1) {
					uni.showModal({
						title: '订单时间冲突',
						content: '有客户正在预订付款或房间已被预约,该时段已被锁定',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {
			
							}
						}
					});
				} else {
					this.confirm();
				}
			},
			async confirm() {
				console.log(this.params)
				let data = await Api.apiCall('post', Api.order.createOrder, this.params);
				if(data){
					uni.showModal({
						title: '提示',
						content: '加时成功',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {
								
							}
						}
					});
				}
			},
			addMinute(date, duration) {
				var nd = new Date(date);
				nd = nd.valueOf();
				nd = nd + duration *60 * 1000;
				nd = new Date(nd);
				//alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
				var y = nd.getFullYear();
				var m = nd.getMonth() + 1;
				var d = nd.getDate();
				if (m <= 9) m = "0" + m;
				if (d <= 9) d = "0" + d;
				var hours = nd.getHours() < 10 ? "0" + nd.getHours() : nd.getHours();
				var minutes = nd.getMinutes() < 10 ? "0" + nd.getMinutes() : nd.getMinutes();
				var seconds = nd.getSeconds() < 10 ? "0" + nd.getSeconds() : nd.getSeconds();
				return y + "/" + m + "/" + d + " " + hours + ":" + minutes;;
			},
			async getStoreById(storeId){
				let data = await Api.apiCall('get', Api.qsg.getStore, {
					storeId: storeId
				});
				if(data){
					this.store = data;
				}
			},
			async agreeCannelOrder(orderId,storeId){
				// let params = {
				// 	id: orderId,
				// 	storeId: this.storeId
				// }
				let params = {
					id: orderId,
					storeId:Api.STORE_ID
				}
				if(this.store.isDandian=='是'){
					params.storeId = storeId
				}
				let data = await Api.apiCall('post', Api.order.agreeCannelOrder, params);
				if(data){
					uni.showToast({
						title:'取消成功'
					})
					this.loadData(this.storeId);
				}
			},
			deleteOrder(orderId){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认要删除订单?',
					success: function (res) {
						if (res.confirm) {
							let params = {
								id: orderId,
							}
							let data = Api.apiCall('post', Api.order.deleteOrder, params);
							if(data){
								uni.showToast({
									title:'删除成功'
								})
								that.loadData(that.storeId);
							}
						} else if (res.cancel) {
							
						}
					}
				});
			},
			bottomTrigger() {
				this.getMoreList();
			},
			async cannelOrder(item) {
				let data = await Api.apiCall('get', Api.order.cannelOrder, {
					orderId: item.id
				});
				if (data) {
					this.loadData(this.storeId);
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
				}
			},
			longpress(item) {},
			shareToggle(index, order) {
				if (order.orderStatus != 2) {
					return false;
				}
				this.order = order;
				this.$refs.popup.open('bottom');
			},
			//获取订单列表
			async loadData(storeId) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let status = navItem.status;
				currentPage = 1;
				this.loadingType = 0;
				uni.showNavigationBarLoading();
				let params = {
					status: status,
					storeId: storeId,
					pageNum: currentPage
				};
				let data = await Api.apiCall('post', Api.order.listAdmin, params);
				// console.log("订单列表" + JSON.stringify(data));
				let orderList = data.records.filter(item => {
					//添加不同状态下订单的表现形式
					item = Object.assign(item, this.orderStateExp(item.orderStatus));
					item.createDatetime = this.dateFormat(item.createDatetime);
					return item;
				});
				navItem.orderList = [];
				orderList.forEach(item => {
					navItem.orderList.push(item);
				});
				currentPage++;
				uni.hideNavigationBarLoading();
				uni.stopPullDownRefresh();
			},
			async getMoreList() {
				var that = this;
				if (that.loadingType !== 0) {
					return false;
				}
				that.loadingType = 1;
				uni.showNavigationBarLoading();

				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let status = navItem.status;
				let params = {
					status: status,
					storeId: this.storeId,
					pageNum: currentPage
				};
				let data = await Api.apiCall('post', Api.order.listAdmin, params);
				if (data.records == null || data.records.length == 0) {
					that.loadingType = 2;
					uni.hideNavigationBarLoading();
					return;
				}
				// console.log("订单列表" + JSON.stringify(data));
				let orderList = data.records.filter(item => {
					//添加不同状态下订单的表现形式
					item = Object.assign(item, this.orderStateExp(item.orderStatus));
					item.createDatetime = this.dateFormat(item.createDatetime);
					return item;
				});
				console.log(111)
				orderList.forEach(item => {
					navItem.orderList.push(item);
				});
				console.log(navItem.orderList)
				currentPage++;
				that.loadingType = 0;
				uni.hideNavigationBarLoading();
			},
			//swiper 切换
			// changeTab(e) {
			// 	this.tabCurrentIndex = e.target.current;
			// 	this.loadData('tabChange');
			// },
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				currentPage = 1;
				this.loadData(this.storeId);
			},
			//取消订单
			async cancelOrder(item) {
				uni.showLoading({
					title: '请稍后'
				});
				let params = {
					orderId: item.id
				};
				let data = await Api.apiCall('post', Api.order.closeDriverOrder, params);
				console.log(data);
				if (data) {
					this.$core.msg("订单取消成功.");
				}
				uni.hideLoading();
				this.loadData('refresh');
			},
			//订单状态文字和颜色
			orderStateExp(status) {
				let stateTip = '',
					stateTipColor = '#fa436a';
				switch (+status) {
					case 12:
						stateTip = '待付款';
						break;
					case 1:
						stateTip = '待付款';
						break;
					case 2:
						stateTip = '已付款';
						break;
					case 7:
						stateTip = '已完成';
						stateTipColor = '#909399';
						break;
					case 8:
						stateTip = '已评价';
						stateTipColor = '#909399';
						break;
					case 15:
						stateTip = '已关闭';
						stateTipColor = '#909399';
						break;
						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
			dateFormat(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
			
	    }
	};
</script>

<style lang="scss">
	page,
	.content {
		background: #f7f7f7;
		height: 100%;
	}

	.tab-content {
		border-radius: 30rpx;
	}

	.bottom-content {
		height: 600rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.bottom-content-item {
		flex: 1;
	}

	.bottom-content-item-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.meal-item {
		flex: 1;
		width: 33%;
		height: 200rpx;
		margin-top: 60rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		text-align: center;
		border-radius: 15rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom-content-item-column {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.btn-primary {
		background-color: #ff9662;
		text-align: center;
		border-radius: 15rpx;
		color: #FFFFFF;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 30rpx;
	}

	.btn-default {
		/* background-color: #ff9662; */
		border: 1rpx solid #ff9662;
		text-align: center;
		border-radius: 15rpx;
		color: #ff9662;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		margin-bottom: 30rpx;
	}

	.item-no-select {
		background-color: #ff9662;
	}

	.uni-popup-share {
		background-color: #fff;
	}

	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}

	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 360px;
	}

	.uni-share-content-item {
		width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
	}

	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}

	.uni-share-image {
		width: 30px;
		height: 30px;
	}

	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}

	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
	}

	.uni-share-button {
		flex: 1;
		border-radius: 50px;
		color: #666;
		font-size: 16px;
	}

	.uni-share-button::after {
		border-radius: 50px;
	}

	.swiper-box {
		/*  #ifdef  MP-WEIXIN  */
		height: calc(100% - 40px);
		/* #endif */
		/*  #ifdef  H5  */
		height: calc(100% - 40px);
		/* #endif */
		/*  #ifdef  MP-ALIPAY  */
		height: 1200rpx;
		/* #endif */
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 50px;
		padding: 0 5px;
		background: #62b074;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #ffffff;
			position: relative;

			&.current {
				color: #ffffff;
				font-size: 20px;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #62b074;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 10upx;
		background: #fff;
		margin-top: 16upx;
		border-radius: 25rpx;
		position: relative;
		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;

			.goods-img {
				display: block;
				width: 220upx;
				height: 300upx;
				border-radius: 20rpx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			position: absolute;
			bottom: 5rpx;
			right: 10rpx;
			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn1 {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: #62b074;
			border-style: solid;
			border-width: 1rpx;
			border-color: #62b074;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}

	}

	.action-btn {
		width: 140upx;
		height: 40upx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 40upx;
		font-size: $font-sm + 2upx;
		background: #62b074;
		color: #fff9f9;
	}

	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 28upx;
		color: #999;
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px;
	}

	.uni-load-more__img>view {
		position: absolute;
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: 0.2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite;
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0;
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0;
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px;
	}

	.load2 {
		transform: rotate(30deg);
	}

	.load3 {
		transform: rotate(60deg);
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s;
	}

	.load2 view:nth-child(1) {
		animation-delay: 0.13s;
	}

	.load3 view:nth-child(1) {
		animation-delay: 0.26s;
	}

	.load1 view:nth-child(2) {
		animation-delay: 0.39s;
	}

	.load2 view:nth-child(2) {
		animation-delay: 0.52s;
	}

	.load3 view:nth-child(2) {
		animation-delay: 0.65s;
	}

	.load1 view:nth-child(3) {
		animation-delay: 0.78s;
	}

	.load2 view:nth-child(3) {
		animation-delay: 0.91s;
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s;
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s;
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s;
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.2;
		}
	}
	
	.operate-area{
		width: 200rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		
		.operate-btn{
			width: 200rpx;
			height: 80rpx;
			background: #ff9662;
			color: #fff9f9;
		}
	}
	
	.jiashi-area {
		width: 200rpx;
		flex: 1;
		.jiashi-btn {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			letter-spacing: 10rpx;
			background: #aa99a7;
			color: #fff9f9;
		}
	}
	
	.xudingpopup {
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding-left: 32rpx;
		padding-top: 30rpx;
	}
	
	.popuptitle {
		height: 30rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
	}
	
	.meals {
		display: flex;
		margin-top: 60rpx;
		flex-wrap: wrap;
	}
	
	.meal {
		width: 128rpx;
		height: 84rpx;
		line-height: 84rpx;
		background: #F1F3F4;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: center;
		margin-right: 11rpx;
		letter-spacing: 6rpx;
		margin-bottom: 10rpx;
	}
	
	.xudingsub {
		width: 686rpx;
		height: 88rpx;
		background: #62b074;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin-top: 30rpx;
	}
	
	.meal-item-selected {
		width: 128rpx;
		height: 84rpx;
		line-height: 84rpx;
		background: #62b074;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		letter-spacing: 6rpx;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin-right: 11rpx;
		margin-bottom: 10rpx;
	}
	
</style>
